<template>
	<view class="container page">
		<view class="row tab">
			<view class="item" :class="orderState==2?'actice':''" @click="changeTab" data-id="2">
				<text>进行中</text>
				<text></text>
			</view>
			<view class="item" :class="orderState==4?'actice':''" @click="changeTab" data-id="4">
				<text>已完成</text>
				<text></text>
			</view>
		</view>
		<view style="height: 98rpx"></view>
		<view class="order_content">
			<view class="order_list" v-for="(item,index) in orderList" :key="index" @click="toDetail" :data-id="item.id">
				<view class="order_list_title">
					<text>{{item.order_state_name}}</text>
					<text v-if="item.order_state==4" style="margin-left: 16rpx;">
						{{item.finish_time}}
					</text>
				</view>
				<view class="order_shop row">
					<view v-for="(value,key) in item.snap_items" :key="key">
						<image mode="aspectFill" :src="value.goods_info.image"></image>
					</view>
					<view class="order_coder row" v-if="item.snap_items.length>=3">
						<text></text>
						<text></text>
						<text></text>
					</view>
				</view>
				<view class="order_button" v-if="item.order_state==2">
					<view>
						<text @click.stop="scanCode" class="orderhover">核销</text>
					</view>
				</view>
			</view>
		</view>
		<view class="row paginate">
			<text>
				<block>{{config.show_loading?config.loading_msg:''}}</block>
				<block>{{config.show_finish?config.finish_msg:''}}</block>
				<block>{{config.show_empty?config.empty_msg:''}}</block>
			</text>
		</view>
		<!-- end-->
	</view>
</template>

<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	import common from "../../../../common/js/function.js";
	export default {
		data() {
			return {
				config: {}, //分页配置
				busy: false, //当前上拉加载的忙碌状态
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				orderList: [],
				orderState: 2, //订单状态 2- 进行中，4-已完成
			}
		},
		components: {

		},
		onLoad() {
			this._load();
		},
		methods: {
			_load() {
				var that = this;
				that.orderList = [];
				that._setConfig(() => {
					that.getOrderList();
				});
			},
			_setConfig(callback = '') {
				var that = this;
				that.config = common.getPageConfig();
				typeof callback == 'function' ? callback() : ''
			},
			//获取订单列表
			getOrderList() {
				var that = this;
				if (that.config.show_finish) return false;
				that.config.show_loading = true; //展示loading
				var current_page = that.config.current_page;
				http.post('api/store/order/OrderList', {
					page: current_page,
					status: that.orderState
				}, res => {
					that.orderList = that.orderList.concat(res.datas);
					that.config.show_loading = false; //关闭loading
					if (res.datas.length == 0) {
						if (current_page == 1) {
							that.config.show_empty = true;
						} else {
							that.config.show_finish = true;
						}
					}
					that.busy = false;
				});
			},
			onReachBottom() {
				var that = this;
				console.log('toBottom');
				if (that.busy == true) return false;
				that.busy = true;
				that.config.current_page += 1;
				that.getOrderList();
			},
			onPullDownRefresh() {
				var that = this;
				that._load();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//扫码核销
			scanCode() {
				common.scanCode();
			},
			changeTab(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				console.log(id)
				if (that.orderState == id) return;
				that.orderState = id;
				that._load();
			},
			toCategory() {
				uni.switchTab({
					url: '/pages/store/category/category'
				});
			},
			toDetail(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				});
			}
		}
	}
</script>

<style>
	.tab {
		position: fixed;
		top: 0;
		background: #FFFFFF;
		width: 100%;
		height: 106rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333333;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(228, 228, 228, 0.35);
	}

	.tab .item {
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab .actice text:nth-child(2) {
		bottom: 0;
		position: absolute;
		height: 6rpx;
		width: 70rpx;
		border-radius: 4rpx;
		background: #FF9D11;
	}

	.tab .active {
		color: #FF9D11;
	}

	.container,
	page {
		background: rgba(247, 247, 247, 1);
	}

	.order_title {
		height: 102rpx;
		line-height: 102rpx;
		color: #333333;
		font-size: 32rpx;
	}

	.order_content {
		width: 685rpx;
		margin: 0 auto;
	}

	.order_list {
		width: 100%;
		height: 417rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 7px 0px rgba(230, 228, 228, 0.29);
		border-radius: 10px;
		margin-top: 40rpx;
	}

	.order_list_title {
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #939393;
		border-bottom: 1px solid #F1EFEF;
		padding: 0 33rpx;
	}

	.order_shop {
		padding: 40rpx 32rpx;
	}

	.order_shop>view {
		width: 188rpx;
		height: 188rpx;
		overflow: hidden;
		margin: 0 5rpx;
	}

	.order_shop>view image {
		width: 100%;
		height: 100%;
	}

	.order_coder {
		width: 38rpx !important;
		height: 11rpx !important;
		margin-top: 90rpx !important;
	}

	.order_coder text {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #3F536E;
		display: block;
		margin: 0 1rpx;
	}

	.order_button {
		display: flex;
		flex-direction: row;
	}

	.order_button>view {
		margin-left: auto;
	}

	.order_button text {
		width: 182rpx;
		height: 56rpx;
		border: 1rpx solid #FF9D11;
		font-size: 30rpx;
		text-align: center;
		line-height: 56rpx;
		color: #FF9D11;
		border-radius: 10rpx;
		margin-right: 33rpx;
		display: inline-block;
	}

	.orderhover {
		background: #FF9D11;
		color: #fff !important;
	}
</style>
